<template>
  <div class="main-header">
    <div class="menu-icon" @click="handleMenuIconClick">
      <el-icon size="25px">
        <component :is="isFold ? 'Expand' : 'Fold'" />
      </el-icon>
    </div>
    <div class="content">
      <el-breadcrumb separator-icon="ArrowRight">
        <template v-for="item in breadCrumbs" :key="item.name">
          <el-breadcrumb-item :to="{ path: item.path }">{{ item.lable }}</el-breadcrumb-item>
        </template>
      </el-breadcrumb>
      <div class="header-info">
        <div class="operation">
          <span class="info-span">
            <el-icon><Message /></el-icon>
          </span>
          <span class="info-span">
            <span class="dot"></span>
            <el-icon><Search /></el-icon>
          </span>
        </div>
        <div class="info">
          <el-dropdown>
            <span class="user-info">
              <el-avatar :size="30" src="https://upload.jianshu.io/users/upload_avatars/1102036/c3628b478f06.jpeg"></el-avatar>
              <span class="name">{{ userInfo.data.name }}</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleUserInfoClick">
                  <el-icon><InfoFilled /></el-icon>
                  <span>个人信息</span>
                </el-dropdown-item>
                <el-dropdown-item @click="handleUpdatePwdClick">
                  <el-icon><Lock /></el-icon>
                  <span>修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click="handleQuitClick">
                  <el-icon><SwitchButton /></el-icon>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
    <owen ref="owenRef"></owen>
    <updatePwd ref="updatePwdRef"></updatePwd>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { useRouter, useRoute } from 'vue-router';
  import { clearAll, getItem } from '~/utils/localStorage'
  import { ElMessageBox } from 'element-plus'
  import { mapPathToBreadcrumbs } from '~/utils/common'
  import Owen from '../owen/owen.vue'
  import UpdatePwd from '../owen/updatePwd.vue'

  const owenRef = ref(null)
  const updatePwdRef = ref(null)

  const emit = defineEmits(['foldChange'])

  const isFold = ref(false)

  // 从缓存中取出userinfo
  const userInfo = getItem('userinfo')

  function handleMenuIconClick() {
    isFold.value = !isFold.value

    emit('foldChange', isFold.value)
  }

  const router = useRouter()
  // 退出登录
  function handleQuitClick() {
    // const allRouter = router.getRoutes()
    // console.log(allRouter)
    ElMessageBox.confirm('确定退出吗?', '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false
    }).then(() => {
      clearAll()
      // 移除所有路由
      // allRouter.forEach(item => {
      //   router.removeRoute(item.name)
      // })
      router.push('/login')
      location.reload()
    }).catch(() => {

    })
  }

  // 得到面包屑
  const route = useRoute()
  const menus = getItem('menu')
  const breadCrumbs = computed(() => {
    return mapPathToBreadcrumbs(route.path, menus)
  })

  // 个人信息
  function handleUserInfoClick() {
    if(owenRef.value) {
      owenRef.value.init()
    }
  }
  // 修改密码
  function handleUpdatePwdClick() {
    if(updatePwdRef.value) {
      updatePwdRef.value.init()
    }
  }
</script>

<style>
  .main-header {
    display: flex;
    align-items: center;
    flex: 1;
    height: 100%;
  }

  .menu-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding: 0 18px;
  }

  .header-info {
    display: flex;
    align-items: center;
  }
  .operation {
    display: inline-flex;
    margin-right: 20px;
  }
  .info-span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 35px;
  }
  .info-span:hover {
    background: #f2f2f2;
  }
  i {
    font-size: 20px;
  }
  .dot {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 10;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 100%;
  }

  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .name {
    margin-left: 5px;
  }
</style>
